<template>
  <PageWrapper title="详情组件示例">
    <Description title="基础示例" :collapseOptions="{ canExpand: true, helpMessage: '根据column设置，自动排列....' }" :column="3" :data="mockData" :schema="schema" />
    <Description title="垂直示例" :collapseOptions="{ canExpand: true, helpMessage: 'help me' }" :column="2" :data="mockData" :schema="schema" class="mt-4" layout="vertical"/>
    <Description @register="register" class="mt-4" />
    <Description @register="register1" class="mt-4" />
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Description, DescItem, useDescription } from '/@/components/Description/index';
import { PageWrapper } from '/@/components/Page';

const mockData: Recordable = {
  username: 'test',
  nickName: 'VB',
  age: '123',
  phone: '15695909xxx',
  email: '190848757@qq.com',
  addr: '厦门市思明区',
  sex: '男',
  certy: '3504256199xxxxxxxxx',
  tag: 'orange',
};
const schema: DescItem[] = [
  {
    field: 'username',
    label: '用户名',
  },
  {
    field: 'nickName',
    label: '昵称',
    render: (curVal, data) => {
      return `${data.username}-${curVal}`;
    },
  },
  {
    field: 'sex',
    label: '性别',
  },
  {
    field: 'phone',
    label: '联系电话',
  },
  {
    field: 'email',
    label: '邮箱',
  },
  {
    field: 'addr',
    label: '地址',
  },
];
export default defineComponent({
  components: { Description, PageWrapper },
  setup() {
    const [register] = useDescription({
      title: '有边框',
      data: mockData,
      schema: schema,
      bordered: true,           //是否显示边框
      column: 4,                //显示列数
      layout: 'horizontal',       //vertical：垂直显示  horizontal：水平显示
      // colon: true,           //显示冒号
      // size: 'small',
    });

    const [register1] = useDescription({
      title: '无边框',
      data: mockData,
      schema: schema,
      bordered: false,
    });

    return { mockData, schema, register, register1 };
  },
});
</script>
